<template>
  <div>
    <n-grid cols="5" x-gap="20">
      <n-gi span="1" class="theme_box" style="padding:20px">
        <ocean :use="form"></ocean>
        <n-space justify="center" size="large">
          <n-button type="primary">
            <a-icon name="Search"></a-icon>&nbsp;查询
          </n-button>
          <n-button @click="form.clearModel();">
            <a-icon name="ErrorOutline"></a-icon>&nbsp;清空
          </n-button>
        </n-space>
      </n-gi>
      <n-gi span="4" class="theme_box" style="padding:20px">
        <ocean :use="table"></ocean>
      </n-gi>
    </n-grid>
  </div>
</template>
<script setup lang="tsx">
import { useForm, useTable } from '@/ocean';
let form = useForm()
form.item('商品名称', 'goodsName').input()
form.item('商品类型', 'foodTypes').input()

let table = useTable()
table.column('name', 'name')
table.column('age', 'age')
table.column('id', 'id')
table.column('desc', 'desc')

table.setData([
  { name: 'aaa', age: 1, id: '123', desc: '123123' },
  { name: 'aaa', age: 1, id: '123', desc: '123123' },
  { name: 'aaa', age: 1, id: '123', desc: '123123' },
  { name: 'aaa', age: 1, id: '123', desc: '123123' },
  { name: 'aaa', age: 1, id: '123', desc: '123123' },
  { name: 'aaa', age: 1, id: '123', desc: '123123' },
  { name: 'aaa', age: 1, id: '123', desc: '123123' },
  { name: 'aaa', age: 1, id: '123', desc: '123123' },
])
</script>